import React, { useState, useEffect } from 'react';
import { Button } from 'antd';
import styles from './index.less';

import message from '@/components/Message/index';

export default function index() {
  const test = (type: any) => {
    // message.info('啊啊啊啊啊啊啊啊啊啊');
    message[type]('aaaaa');
  };

  const [show, setShow] = useState<Boolean>(false);
  return (
    <div>
      <Button
        type="primary"
        onClick={() => {
          test('info');
        }}
      >
        info
      </Button>
      <Button
        type="primary"
        onClick={() => {
          test('success');
        }}
      >
        success
      </Button>
      <Button
        type="primary"
        onClick={() => {
          test('error');
        }}
      >
        danger
      </Button>
      <Button
        type="primary"
        onClick={() => {
          test('warning');
        }}
      >
        warning
      </Button>
      <div>
        <Button
          onClick={() => {
            setShow(!show);
          }}
        >
          change
        </Button>
      </div>
      {show && (
        <div
          className={[`${styles.block}`, show ? styles.show : styles.hide].join(
            ' ',
          )}
        ></div>
      )}
    </div>
  );
}
